<template>
	<view class="service-container">
		<!-- 自定义底部菜单 -->
		<dynamic-tabbar></dynamic-tabbar>
		
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="location-info" @click="selectLocation">
				<text class="location-icon">📍</text>
				<text class="location-text">{{ currentLocation }}</text>
				<text class="arrow-icon">▼</text>
			</view>
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input 
					v-model="searchKeyword" 
					placeholder="搜索服务" 
					@confirm="onSearch"
					class="search-input"
				/>
			</view>
		</view>
		
		<!-- 服务分类 -->
		<view class="category-section">
			<view class="section-title">热门服务</view>
			<view class="category-grid">
				<view 
					v-for="(category, index) in serviceCategories" 
					:key="index"
					@click="selectCategory(category)"
					class="category-item"
				>
					<view class="category-icon">
						<text class="icon-text">{{ category.icon }}</text>
					</view>
					<text class="category-name">{{ category.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 服务商列表 -->
		<view class="provider-list">
			<view class="section-title">推荐服务商</view>
			
			<view v-if="filteredProviders.length === 0" class="empty-state">
				<text class="empty-icon">🔧</text>
				<text class="empty-text">暂无服务商</text>
			</view>
			
			<view 
				v-for="provider in filteredProviders" 
				:key="provider.id"
				@click="viewProvider(provider)"
				class="provider-item"
			>
				<image :src="provider.avatar" class="provider-avatar"></image>
				
				<view class="provider-info">
					<view class="provider-header">
						<text class="provider-name">{{ provider.name }}</text>
						<view class="provider-badges">
							<text v-for="badge in provider.badges" :key="badge" class="badge">{{ badge }}</text>
						</view>
					</view>
					
					<view class="provider-rating">
						<view class="stars">
							<text v-for="i in 5" :key="i" class="star" :class="{ filled: i <= provider.rating }">★</text>
						</view>
						<text class="rating-text">{{ provider.rating }}</text>
						<text class="review-count">({{ provider.reviewCount }}条评价)</text>
					</view>
					
					<view class="provider-services">
						<text class="services-label">服务项目：</text>
						<text class="services-text">{{ provider.services.join('、') }}</text>
					</view>
					
					<view class="provider-details">
						<text class="distance">📍 {{ provider.distance }}</text>
						<text class="experience">👨‍💼 {{ provider.experience }}年经验</text>
						<text class="price">💰 起步价¥{{ provider.startPrice }}</text>
					</view>
					
					<view v-if="provider.promotion" class="promotion">
						<text class="promotion-text">{{ provider.promotion }}</text>
					</view>
				</view>
				
				<view class="provider-actions">
					<button @click.stop="callProvider(provider)" class="call-btn">📞</button>
					<button @click.stop="bookService(provider)" class="book-btn">预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import DynamicTabbar from '../../components/dynamic-tabbar.vue'

export default {
	components: {
		DynamicTabbar
	},
	data() {
		return {
			currentLocation: '北京市朝阳区',
			searchKeyword: '',
			selectedCategory: null,
			serviceCategories: [
				{ id: 1, name: '家政清洁', icon: '🧹', type: 'cleaning' },
				{ id: 2, name: '维修安装', icon: '🔧', type: 'repair' },
				{ id: 3, name: '搬家货运', icon: '🚚', type: 'moving' },
				{ id: 4, name: '美容美发', icon: '💇‍♀️', type: 'beauty' },
				{ id: 5, name: '按摩推拿', icon: '💆‍♂️', type: 'massage' },
				{ id: 6, name: '宠物服务', icon: '🐕', type: 'pet' },
				{ id: 7, name: '汽车服务', icon: '🚗', type: 'car' },
				{ id: 8, name: '更多服务', icon: '➕', type: 'more' }
			],
			providers: [
				{
					id: 1,
					name: '张师傅',
					avatar: '/static/images/avatar1.jpg',
					rating: 4.9,
					reviewCount: 156,
					distance: '500m',
					experience: 8,
					startPrice: 50,
					services: ['家电维修', '水电安装', '家具组装'],
					badges: ['金牌师傅', '实名认证'],
					promotion: '首次服务9折',
					category: 'repair'
				},
				{
					id: 2,
					name: '李阿姨',
					avatar: '/static/images/avatar2.jpg',
					rating: 4.8,
					reviewCount: 234,
					distance: '800m',
					experience: 5,
					startPrice: 80,
					services: ['深度清洁', '日常保洁', '开荒保洁'],
					badges: ['五星好评', '实名认证'],
					promotion: '新用户立减20元',
					category: 'cleaning'
				},
				{
					id: 3,
					name: '王师傅',
					avatar: '/static/images/avatar3.jpg',
					rating: 4.7,
					reviewCount: 89,
					distance: '1.2km',
					experience: 12,
					startPrice: 200,
					services: ['居民搬家', '公司搬迁', '长途搬家'],
					badges: ['专业搬家', '实名认证'],
					promotion: '满500减50',
					category: 'moving'
				}
			]
		}
	},
	computed: {
		filteredProviders() {
			if (!this.selectedCategory) {
				return this.providers;
			}
			return this.providers.filter(provider => provider.category === this.selectedCategory);
		}
	},
	methods: {
		selectLocation() {
			// 选择位置逻辑
		},
		onSearch() {
			// 搜索逻辑
		},
		selectCategory(category) {
			this.selectedCategory = category.type;
		},
		viewProvider(provider) {
			uni.navigateTo({
				url: `/pages/service/provider-detail?id=${provider.id}`
			});
		},
		callProvider(provider) {
			uni.makePhoneCall({
				phoneNumber: '400-123-4567'
			});
		},
		bookService(provider) {
			uni.navigateTo({
				url: `/pages/service/booking?providerId=${provider.id}`
			});
		}
	}
}
</script>

<style scoped>
.service-container {
	padding-bottom: 60px; /* 为底部菜单留出空间 */
	background-color: #f5f5f5;
}

.search-header {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.location-info {
	display: flex;
	align-items: center;
	margin-right: 10px;
}

.location-icon {
	color: #27B387;
	margin-right: 5px;
}

.location-text {
	font-size: 14px;
	color: #333;
	margin-right: 5px;
}

.arrow-icon {
	font-size: 12px;
	color: #999;
}

.search-box {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 8px 15px;
}

.search-icon {
	margin-right: 8px;
	color: #999;
}

.search-input {
	flex: 1;
	font-size: 14px;
	border: none;
	background: transparent;
}

.category-section {
	background-color: #fff;
	padding: 15px;
	margin-bottom: 10px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 15px;
}

.category-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.category-item {
	width: 22%;
	text-align: center;
	margin-bottom: 15px;
}

.category-icon {
	width: 50px;
	height: 50px;
	background-color: #f8f8f8;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}

.icon-text {
	font-size: 24px;
}

.category-name {
	font-size: 12px;
	color: #333;
}

.provider-list {
	padding: 0 15px;
}

.empty-state {
	text-align: center;
	padding: 50px 0;
	background-color: #fff;
	border-radius: 8px;
}

.empty-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 10px;
}

.empty-text {
	color: #999;
	font-size: 14px;
}

.provider-item {
	display: flex;
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 15px;
	padding: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.provider-avatar {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	margin-right: 15px;
}

.provider-info {
	flex: 1;
}

.provider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.provider-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.provider-badges {
	display: flex;
}

.badge {
	background-color: #27B387;
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: 5px;
}

.provider-rating {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.stars {
	display: flex;
	margin-right: 5px;
}

.star {
	color: #ddd;
	font-size: 12px;
}

.star.filled {
	color: #ffa500;
}

.rating-text {
	font-size: 12px;
	color: #333;
	margin-right: 5px;
}

.review-count {
	font-size: 12px;
	color: #999;
}

.provider-services {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.services-label {
	font-size: 12px;
	color: #666;
	margin-right: 5px;
}

.services-text {
	font-size: 12px;
	color: #333;
	flex: 1;
}

.provider-details {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.distance, .experience, .price {
	font-size: 12px;
	color: #666;
	margin-right: 15px;
}

.promotion {
	background-color: #fff3e0;
	padding: 4px 8px;
	border-radius: 4px;
	border-left: 3px solid #ff9800;
}

.promotion-text {
	font-size: 12px;
	color: #ff9800;
}

.provider-actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 10px;
}

.call-btn, .book-btn {
	width: 60px;
	height: 30px;
	border-radius: 15px;
	font-size: 12px;
	margin-bottom: 8px;
	border: none;
}

.call-btn {
	background-color: #f0f0f0;
	color: #333;
}

.book-btn {
	background-color: #2196F3;
	color: white;
}
</style>